// 发送弹幕，调用弹幕组件方法 ref=Fatbarrage
var timer;
var danmutimer;
var DanmuList;// 弹幕列表
var upper_DanmuIndex;// 上一次跑起来的弹幕索引
export default {
	data() {
		return {
			// 弹幕设置信息
			DanmuSetting:{
				Opacity: 0.9,//弹幕盒子整体透明度（透明度）
				FontSize:14,//字体大小（字号）
				duration:10000,//弹幕持续时间（速度）
				cell_num:2,//弹幕轨道数（轨道数量5个）
				// 弹幕设置分段进度条参数（抽屉面板打开的）
				Slider_step:{
					Opacity_Value: 9,// 透明度 => 弹幕分段进度条的值
					Opacity_text: '90%',// 透明度 => 文本内容

					FontSize_Value: 2,// 字号 => 弹幕分段进度条的值
					FontSize_text: '标准',// 字号 => 文本内容

					duration_Value: 3,// 速度 => 弹幕分段进度条的值
					duration_text: '正常',// 速度 => 文本内容

					cell_num_Value: 3,// 显示区域 => 弹幕分段进度条的值（弹幕轨道索引+1）
					cell_num_text: '40%',// 显示区域 => 文本内容
				}
			},
			// 发送弹幕数据obj
			sendDanmuObj:{
				time: null,//弹幕发送的时间
				text: '',//弹幕内容
				avatar: '',//用户头像
				color: '',//字体颜色
				border_radius: '',//圆角
				border:'',//边框色
				background_image:'',//背景线性渐变色
				background_image_opacity:1,//背景线性渐变色透明度
				opacity:1,//弹幕item透明度（当前发送的弹幕-整体透明度）
			},
			Textlength: 0,//字数（用户输入时统计）
			keyboardheight: 0,//键盘高度（当键盘收起时重制0）
			tabs_current: 1,//tabs索引（字体颜色，表情，道具城）
			
			// 弹幕颜色相关
			Color_current: 0,//弹幕颜色索引（普通用户弹幕颜色区）
			// 默认未选
			bgColor_current: null,//弹幕颜色索引（会员弹幕颜色区）
			isSuiJi_Color: true,//是否是随机生成弹幕文字颜色
			// 弹幕输入框样式
			placeholder_style:{
				background_image: '',//渐变背景色
				color: '#838383',//字体颜色（默认838383）
				fontSize: 16+'px',//字体大小
				// 背景色透明度 + 字体透明度后期更新同步过来
			},
			focus:false,//获取焦点。（当点击tabs索引是，让键盘失去焦点）
			danmuInput_placeholder_List:[],//弹幕输入框内容为空时占位文本内容，内置的有默认内容，你也可以自定义
			placeholder:'请输入文本',//弹幕输入框内容为空时占位文本
			
			// 弹幕开关相关
			isDanMuInput_View: false,//发送弹幕View盒子>>弹幕编辑盒子（写弹幕发送弹幕）
			isDanMu_FatbarrageView: true,//是否关闭弹幕组件（弹幕视图盒子）
			

			/* 系统自动发送弹幕相关 */
			isfangdou: true,//系统自动弹幕（发送后边true，延迟100毫秒变为false，用于修复到点发送弹幕，同一个弹幕发送几次的bug）
			
		}
	},
	async mounted(){
		if (this.danmuInput_placeholderList.length<=0){
			// 使用系统内置的输入框为空时的弹幕数据
			this.danmuInput_placeholder_List = this.getDanmuInput_placeholder_List()
		}else {
			// 使用用户自定义的
			this.danmuInput_placeholder_List = this.danmuInput_placeholderList
		}
	},
	watch:{
		danmulist: {
			handler(newDanmuList,oldDanmuList) {
				// 获取弹幕数据列表
				DanmuList = this.danmulist
			},
			immediate: true,
			deep: true
		},
		//监听视频进度时间发送变化，调用系统自动发送弹幕
		timeUpdate: {
			handler: function(newUpdate,oldUpdate){
				// 未开启弹幕时，直接返回，不向下执行
				if (this.video_isDanmu == false) return
				// 当前时长（当前播放进度/时间）并将小数转为整数
				let current_time = Math.round(newUpdate[0].currentTime)
				// 遍历弹幕列表
				for (let i=0; i<DanmuList.length; i++){
					// 如果当前进度时间和弹幕跑起来的时间相等，则执行系统自动发送弹幕
					if (current_time == DanmuList[i].time){
						// 如果系统发送弹幕 = false，才可以进来，否则不可以。
						this.danmuAdd_auto(DanmuList[i],i)
					}
				}
			},
			immediate: true,//普通监听（可监听到第一次绑定的变化）
			deep: true//深度监听（可监听对象内属性变化）
		},
		isDanMu_FatbarrageView:{
			handler(newDanMu,oldDanMu){
				this.video_isDanmu = newDanMu
			}
		}
	},
	methods:{
		// 用户手动发送弹幕
		danmuAdd_user(){
			/* 2022-0125 新增功能 */
			// 未开启弹幕时，直接返回，不向下执行
			if (this.video_isDanmu == false) return
			// 隐藏软键盘
			uni.hideKeyboard()
			// 获取敏感词
			let myWordsList = this.Config.DanMu_Sensitive_Words
			// 获取用户输入的弹幕内容
			let str = this.sendDanmuObj.text
			// 检查弹幕内容是否包含敏感词
			for (let i in myWordsList) {
				let flag = this.getRegExp(myWordsList[i],str)
				if (flag){
					// 已匹配到敏感词
					// 获取敏感词提示内容
					let content = this.Config.DanMu_Sensitive_content
					this.uniShowToast(content)
					// 直接返回，不向下执行
					return
				}else {
					// 未匹配到敏感词
				}
			}
			

			// 1. 获取是否是随机生成颜色
			let isSuiJiColor = this.isSuiJi_Color
			if (isSuiJiColor==true){
				// 2. 设置弹幕颜色
				this.sendDanmuObj.color = this.getRandomColor()
			}else {
				// 不是随机生成颜色
			}
			// 判断字数是否 >= 1，才能发送弹幕
			if (this.Textlength >= 1){
				// 3. 设置弹幕发送的时间（记录时间）
				this.sendDanmuObj.time = Math.round(this.timeUpdate[0].currentTime)//将小数转为整数
				// 4. 获取弹幕item数据
				let item = this.sendDanmuObj
				
				
				/* 2022-0124 新增优化
				 * 需求：开发者需要自行控制弹幕是否可以发送，比如有些用户是永久禁言的。
				 * 改版：将弹幕数据回调到页面上，通过回调的弹幕数据，自行控制发送弹幕。
				 * 用法：在页面上通过refs调用，示列：this.$refs.myVideo.sendDanmu(item)
				 */

				// 5. 【旧版】调用弹幕组件 用户手动 发送弹幕方法（已改版，看上面的注释）
				//this.$refs.Fatbarrage.add(item)

				// 5. 【新版】将弹幕item数据回调出去
				// 将 用户手动发送的弹幕数据列表 回调出去
				let e = {
					Events: 'UserDanmuList',//标记>>用户手动发送弹幕时
					data: item,// 用户手动发送的弹幕数据
					msg: '用户手动发送的弹幕数据'
				}
				this.$emit('changeMyVideo',e)
				
				// 6. 关闭弹幕输入框view组件方法 - 2021-1203-1418新增
				this.closeDanMuInput_View()
				// 7. 2021-1217-1850新增
				// 7. 清理键盘站位高度 (键盘高度（当键盘收起时重制0）(有时候用户没有手动收起键盘，直接点发送了，就导致下次打开的时候，有键盘站位高度的bug))
				this.keyboardheight = 0
			}else {
				this.uniShowToast('你什么也没写')
			}
			
		},
		// 系统自动发送弹幕
		danmuAdd_auto(item,index){
			// #ifdef APP-PLUS-NVUE
			
			// 未开启弹幕时，直接返回，不向下执行
			if (this.video_isDanmu == false) return
			//console.log('系统自动发送弹幕')

			// 判断上一次跑起来的弹幕索引 是否 不等于 当前的弹幕索引（只有不等于时才可以发送。）
			if (upper_DanmuIndex != index) {
				// 设置弹幕索引
				upper_DanmuIndex = index
				// 判断是否有弹幕数据
				if (!item) return
				// 判断是否音频播放，是就返回出去
				if (this.createAudio==true) return
				// 调用弹幕组件 系统自动 发送弹幕方法
				this.$refs.Fatbarrage.xtauto_add(item)
			}

			// #endif
		},
		
		// 弹幕热词（点击发送）
		getDanmuText_HotWords(item){
			// 2021-1202-1421修复首次点击弹幕热词，不会自动发送弹幕（原因是 点击了弹幕热词，没有设置字数）
			if (item) {
				// 有弹幕热词
				// 1. 设置弹幕字数大于1
				this.Textlength = 2
				// 再执行下方以前的代码
				// 2. 设置弹幕内容
				this.sendDanmuObj.text = item.text
				// 3. 执行 用户手动 发送弹幕
				this.danmuAdd_user()
			}else {
				// 无有弹幕热词
				this.uniShowToast('你什么也没写')
			}
		},
		
		// 当键盘输入时，触发input事件，event.detail = {value ，cursor}
		danmuInput_input: function(e){
			console.log('当键盘输入时')
			this.sendDanmuObj.text = e.detail.value
			this.Textlength = e.detail.cursor
			// 判断字数是否>=35，提示用户不能在输入更多了
			if (e.detail.cursor >= 35){
				uni.showToast({
					title:'亲，字数达到极限了',
					icon:'none'
				})
			}
		},
		// 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
		danmuInput_focus: function(e){
			//console.log('输入框聚焦时触发')
			//console.log('键盘高度 == ' +e.detail.height)
			this.keyboardheight = e.detail.height
			
			// 随机获取 弹幕输入框内容为空时占位数据
			this.getplaceholder()
		},
		// 输入框失去焦点时触发，event.detail = {value: value}
		danmuInput_blur: function(e){
			this.sendDanmuObj.text = e.detail.value
		},
		// 点击完成按钮时触发，event.detail = {value: value}
		danmuInput_confirm: function(e){
			this.sendDanmuObj.text = e.detail.value
			// 判断字数是否 >= 1，才能发送弹幕
			if (this.Textlength >= 1){
				// @01. 执行 用户手动 发送弹幕
				this.danmuAdd_user()
			}else {
				this.uniShowToast('亲！你什么也没写')
			}
		},
		// 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}
		danmuInput_keyboardheightchange: function(e){
			//console.log('键盘高度发生变化时')
			//console.log('键盘高度 == ' +e.detail.height)
			this.keyboardheight = e.detail.height

			// #ifdef APP-PLUS
			// 隐藏系统虚拟按键（导航栏）：https://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.hideSystemNavigation
			plus.navigator.hideSystemNavigation();
			// #endif
		},
		
		/* ========================
		 * =     弹幕设置相关      =
		 * ========================
		 */
		
		
		// 弹幕颜色相关设置（VIP会员弹幕颜色区）
		SetVipDanmuTextColor(e,index){
			if (this.isUserVIP==true){
				// 1. 设置随机生成颜色参数为false
				this.isSuiJi_Color = false
				// 2. 设置弹幕颜色索引（普通用户弹幕颜色区）
				this.Color_current = null// 重制为未选中
				// 3. 设置索引
				this.bgColor_current = index
				// 4. 设置字体颜色同步到弹幕输入框内
				this.Setplaceholder_style(e)
				// 5. 设置弹幕item信息（颜色，文字，等等）
				this.SetSendDanmuObj(e)
			}else {
				this.uniShowToast('请先开通会员')
			}
		},
		// 弹幕颜色相关设置（普通会员弹幕颜色区）
		SetDanmuTextColor(e,index){
			// 1. 设置索引
			this.Color_current = index
			// 2. 设置字体颜色同步到弹幕输入框内
			this.Setplaceholder_style(e)
			// 3. 设置弹幕颜色索引（会员弹幕颜色区）
			this.bgColor_current = null// 重制为未选中
			// 4. 判断类型（是否是随机生成颜色）
			if (e=='suiji'){
				// 1. 设置随机生成颜色参数为true，生成随机色不带边框
				this.isSuiJi_Color = true
				this.placeholder_style.color = '#fff'
				this.uniShowToast('已开启，发送时生效')
			}else {
				// 1. 设置随机生成颜色参数为false
				this.isSuiJi_Color = false
				// 2. 设置弹幕item信息（颜色，文字，等等）
				this.SetSendDanmuObj(e)
			}
			// 5. 重置 -> 设置弹幕边框色
			this.sendDanmuObj.border = ''
			// 6. 重置 -> 设置圆角
			this.sendDanmuObj.border_radius = ''
			// 7. 重置 -> 设置背景线性渐变色
			this.sendDanmuObj.background_image = ''
			// 2021-1203-1434 - 修复首次从会员弹幕色区切换到普通会员弹幕区，没有实时清空弹幕输入框线性背景色
			// 8. 重置 -> 设置弹幕输入框线性渐变背景色
			this.placeholder_style.background_image = ''
		},
		// 设置字体颜色同步到弹幕输入框内
		Setplaceholder_style(e){
			// 设置输入框背景色
			this.placeholder_style.background_image = e.background_imageColor
			// 设置输入框文字色
			this.placeholder_style.color = e.color
			
			// 设置输入框 => 背景色透明度 + 字体透明度后期更新
		},
		// 设置弹幕item信息（颜色，文字，等等）
		SetSendDanmuObj(e){
			// 1. 获取是否是随机生成颜色
			let isSuiJiColor = this.isSuiJi_Color
			// 2. 设置弹幕颜色
			this.sendDanmuObj.color = isSuiJiColor ? this.getRandomColor() : e.color
			// 3. 设置弹幕边框色
			this.sendDanmuObj.border = e.border || ''
			// 4. 设置弹幕内容（无需设置，键盘输入时已经设置了，如果这里在设置，有时候会导致弹幕内容为空数据）
			//this.sendDanmuObj.text = e.text
			// 5. 设置用户头像
			this.sendDanmuObj.avatar = e.avatar || ''
			// 6. 设置圆角
			this.sendDanmuObj.border_radius = e.border_radius || ''
			// 7. 设置背景线性渐变色
			this.sendDanmuObj.background_image = e.background_imageColor || ''
			// 8. 设置背景线性渐变色透明度
			this.sendDanmuObj.background_image_opacity = 1//后期再对接自定义
			// 9. 设置弹幕item透明度（当前发送的弹幕-整体透明度）
			this.sendDanmuObj.opacity = 1//后期再对接自定义
		},
		
		
		
		
		SetDanmuTabs(type){
			switch (type){
				// 弹幕字体颜色
				case 'color':
					// @01. 让键盘失去焦点（收起键盘）（无效）
					
					break;
				// 弹幕表情
				case 'emoji':
					this.uniShowToast('敬请期待')
					break;
				// 弹幕表情
				case 'daoju':
					this.uniShowToast('敬请期待')
					break;
				default:
					break;
			}
		},
		
		// 生成随机颜色 [用于弹幕文本]
		getRandomColor: function() {
			const rgb = []
			for (let i = 0; i < 3; ++i) {
				let color = Math.floor(Math.random() * 256).toString(16)
				color = color.length == 1 ? '0' + color : color
				rgb.push(color)
			}
			return '#' + rgb.join('')
		},
		
		
		
		// 随机获取 弹幕输入框内容为空时占位数据
		getplaceholder(){
			// 获取 弹幕输入框内容为空时占位数据 的lenght高度
			let max = this.danmuInput_placeholder_List.length-1
			// 获取随机数
			let num = this.randomRange(0,max)
			// 写入随机数据
			this.placeholder = this.danmuInput_placeholder_List[num].title
		},
		
		// 计算随机数（动态插入到不同的轨道）
		randomRange(min, max) { // min最小值，max最大值
			return Math.floor(Math.random() * (max)) + min;
		},
		
		// 使用系统内置的
		getDanmuInput_placeholder_List(){
			// 每次换气键盘发送弹幕时，就索引+1，知道最后索引时，在重制0，或者随机也可以
			let list = [
				{title: '发条弹幕证明你来过~'},
				{title: '快来发一条弹幕吧~'},
				{title: '发条弹幕，点亮你的新视界~'},
				{title: '发条弹幕开启一天好心情~'},
				{title: '发弹幕很酷，快来试试'},
				{title: '知道你点开了，发条弹幕吧'},
				{title: '发弹幕，与大家一起互动'},
				{title: '啥也别说了，发弹幕吧'},
				{title: '听说发弹幕能招桃花'},
				{title: '诚挚邀请你发条弹幕'},
				{title: '来都来了，不发条弹幕寻寻亲友？'},
				{title: '爱TA，就发条弹幕表白把~'},
				{title: '发条友善的弹幕激扬文字'},
				{title: '想说点什么？就发弹幕！'},
				{title: '来条弹幕吧，发射！'},
				{title: '有人说发弹幕的都是人才'},
				{title: '发条弹幕，参与剧情互动'},
				{title: '发条弹幕，见证当下'},
				{title: '发条弹幕壮大弹幕大军'},
				{title: '发条弹幕承包空屏'},
				{title: '为你的爱豆发一条弹幕'},
				{title: '好看吗？发条弹幕告诉大家'},
				{title: '心动不如行动，发弹幕吧'},
				{title: '来点弹幕吧，发射！'},
				{title: '发条弹幕记录你此刻所想'},
				{title: '发条弹幕，透透剧呗！'},
			]
			return list
		},

		// 是否开启或关闭弹幕组件（弹幕视图盒子 - 弹幕轨道区）
		isFatbarrageView(e){
			//console.log(e)
			// 设置弹幕组件开关状态
			this.isDanMu_FatbarrageView = e
			if (e==true){
				// 已开启弹幕
			}else {
				// 已关闭弹幕
			}
		},
		// 打开发送弹幕View盒子 ps => 弹幕编辑盒子（写弹幕发送弹幕）
		openDanMuInput_View(){
			// 1. 重置输入框内容为空
			this.sendDanmuObj.text = ''
			// 2. 先暂停视频
			this.pause()
			// 3. 再打开发送弹幕View盒子
			this.isDanMuInput_View = true
			// 4. 关闭全屏控制面板
			this.isgoFull = false
			// 5. 随机获取 弹幕输入框内容为空时占位数据
			this.getplaceholder()
			/* 2021-1203-1443 新增
			 * 判断是否有视频贴片广告（暂停时显示），如果有，则先false，因为弹幕输入框打开的情况下，是不能有贴片广告的
			 * 已移动至（9） 视频暂停时 [贴片广告：可图片可视频] view视图层v-if上isDanMuInput_View==false 
			*/

			/* 2022-0125 新增代码 */
			// 禁用触摸手势事件
			this.isopenDrawerItem = true
			// 销毁定时器（close_ani_FullControl任务）
			clearTimeout(this.timers) 
		},
		// 关闭发送弹幕View盒子
		closeDanMuInput_View(){
			// 启用触摸手势事件
			this.isopenDrawerItem = false
			// 先继续播放视频
			this.play()
			// 再关闭发送弹幕View盒子
			this.isDanMuInput_View = false
			// 打开全屏控制面板
			this.isgoFull = true
		},



		// 弹幕设置（抽屉面板打开的）
		changingDanmuSetting(e){
			//console.log('弹幕设置（抽屉面板打开的）')
			//console.log(e)
			switch (e.type) {
				case 'Opacity':
					this.getDanmuSetting_Opacity(e.index)
					break;
				case 'FontSize':
					this.getDanmuSetting_FontSize(e.index)
					break;
				case 'duration':
					this.getDanmuSetting_duration(e.index)
					break;
				case 'cell_num':
					this.getDanmuSetting_cell_num(e.index)
					break;
					
				default:
					break;
			}
		},
		// 设置弹幕透明度相关
		getDanmuSetting_Opacity(index){
			// 透明度算法 如 -> (1/10)*5 = 0.5
			let value = (1 / 10) * index
			// 设置透明度
			this.DanmuSetting.Opacity = value
			// 设置透明度分段进度条的值
			this.DanmuSetting.Slider_step.Opacity_Value = index
			// 设置透明度文本内容
			this.DanmuSetting.Slider_step.Opacity_text = index + '0%'
		},
		// 设置弹幕字号大小相关
		getDanmuSetting_FontSize(index){
			// 设置字号文本内容
			let Text = index==1 ? '小' : index==2 ? '标准' : index==3 ? '大' : index==4 ? '很大' : '未知'
			// 设置字号大小 （ps => 字号 14 16 18 20 默认16 进度条值2 ）
			this.DanmuSetting.FontSize = 12 + (index * 2)
			// 设置字号分段进度条的值
			this.DanmuSetting.Slider_step.FontSize_Value = index
			// 设置字号文本内容
			this.DanmuSetting.Slider_step.FontSize_text = Text
		},
		// 设置弹幕速度相关
		getDanmuSetting_duration(index){
			// 设置速度文本内容
			let Text = index==1 ? '很快' : index==2 ? '快' : index==3 ? '正常' : index==4 ? '慢' : index==5 ? '很慢' : '未知'
			// 设置速度 （ps => 速度 6000 8000 10000 12000 14000 默认10000 进度条值3  时间越长越慢）
			this.DanmuSetting.duration = Number(4000 + (index * 2000))
			// 设置速度分段进度条的值
			this.DanmuSetting.Slider_step.duration_Value = index
			// 设置速度文本内容
			this.DanmuSetting.Slider_step.duration_text = Text

			//console.log(this.DanmuSetting.duration)
		},
		// 设置弹幕显示区域相关（轨道）
		getDanmuSetting_cell_num(index){
			//console.log(index)
			// 设置显示区域
			this.DanmuSetting.cell_num = (index-1)
			// 判断不为1
			if (index!=1){
			// 设置显示区域分段进度条的值
			this.DanmuSetting.Slider_step.cell_num_Value = index
			// 设置显示区域文本内容
			this.DanmuSetting.Slider_step.cell_num_text = (index-1)*2 + '0%'
			}else {
				this.uniShowToast('请，不能再少了')
			}
		},


		/* ==============================
		 * =    弹幕组件$emit回调相关    =
		 * ==============================
		 */

	
		// 【已废弃】弹幕组件$emit回调（用户手动发送的弹幕，此弹幕数据列表只包含 用户手动发送的弹幕数据）
		changeUserDanmuAdd(data){
			// 将 用户手动发送的弹幕数据列表 回调出去
			let e = {
				Events:'UserDanmuList',//标记>>用户手动发送弹幕时
				data,//用户手动发送的弹幕->数据列表
				msg:'用户手动发送的弹幕->数据列表，你可以用来在你的页面将要离开时，将此弹幕数据和已有的弹幕数据进行合并，并上传你的弹幕库'
			}
			this.$emit('changeMyVideo',e)
		}
	}
}